<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" lang="zh">
    <title>酒店住户信息管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- 引入bootstrap -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- echarts -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="../../static/js/westeros.js"></script>
    <!--vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="/static/js/vue.min.js"></script> -->


    <style>

        #nav {
            width: 250px;
            height: 1224px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 3px 0px 15px rgba(0, 0, 0, 0.05);
            opacity: 1;
            padding-top: 28px;
            float: left;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        #logo {
            width: 68px;
            height: 40px;
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 26px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            /*padding-left: 106px;*/
            /*padding-right: 72px;*/
            /*padding-bottom: 52px;*/
            margin-left: 106px;
            margin-top: 55px;
            margin-bottom: 31px;

        }

        #nav ul li {
            height: 88px;
        }

        #nav img {
            padding-left: 68px;
        }

        #nav a {
            width: 52px;
            height: 16px;
            font-size: 19px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 88px;
            color: rgba(158, 173, 197, 1);
            margin-left: 17px;
            letter-spacing: 3px;
            text-decoration: none;
            opacity: 1;
        }

        #nav ul .managedata {
            background: linear-gradient(90deg, rgba(71, 137, 255, 1) 0%, rgba(71, 137, 255, 1) 2%, rgba(71, 137, 255, 0.47) 3%, rgba(71, 137, 255, 0.1) 56%, rgba(36, 69, 128, 0) 100%);
            border-radius: 3px;
        }

        #user {
            float: right;
            margin-top: 35px;
            /*margin-left: 893px;*/
            margin-right: 58px;

        }


        #totle {
            margin-top: 35px;
            float: left;
            width: 1527px;
        }

        .blue {
            width: 354px;
            height: 143px;
            background: linear-gradient(134deg, rgba(115, 165, 255, 1) 0%, rgba(64, 132, 254, 1) 100%);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            /*margin-left: 57px;*/
        }

        .blue .name {
            /* width: 56px; */
            height: 19px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(201, 222, 255, 1);
            opacity: 1;
            margin-top: 32px;
            text-align: center;
        }

        .blue .digit {
            /* width: 108px; */
            height: 35px;
            font-size: 40px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(255, 255, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 12px;
        }

        .white {
            width: 354px;
            height: 143px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-left: 37px;
        }

        .white .name {
            /* width:56px; */
            height: 19px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(158, 173, 197, 1);
            opacity: 1;
            margin-top: 32px;
            text-align: center;
        }

        .white .digit {
            /* width:93px; */
            height: 35px;
            font-size: 40px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 12px;
        }

        #room {
            width: 484px;
            height: 454px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            /*margin-left: 57px;*/
        }

        #live {
            width: 1005px;
            height: 454px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            margin-left: 37px;
            /* padding-left: 37px; */
        }

        #live #pretotle {
            width: 248px;
            height: 113px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(71, 137, 255, 1);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            opacity: 0.8;
            border-radius: 7px;
            float: left;
        }

        #pretotle .number {
            width: 59px;
            height: 21px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            margin-left: 30px;
            margin-top: 31px;
            float: left;
        }

        #pretotle .name {
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(189, 189, 189, 1);
            opacity: 1;
            margin-top: 11px;
            margin-left: 30px;
            float: left;
        }

        #pretotle .pretotledigit {
            width: 23px;
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(123, 206, 158, 1);
            opacity: 1;
            float: left;
            margin-top: 12px;
            margin-left: 2px;
        }

        #money {
            width: 1526px;
            height: 403px;
            background: rgba(255, 255, 255, 1);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            /*margin-left: 57px;*/
        }

        #live #real {
            width: 248px;
            height: 113px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(71, 137, 255, 1);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            opacity: 0.8;
            border-radius: 7px;
            float: left;
            margin-top: 17px;
        }

        #real .number {
            width: 59px;
            height: 21px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(30, 203, 193, 1);
            opacity: 1;
            margin-left: 30px;
            margin-top: 31px;
            float: left;
        }

        #real .name {
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(189, 189, 189, 1);
            opacity: 1;
            margin-top: 11px;
            margin-left: 30px;
            float: left;
        }

        #real .realtotledigit {
            width: 23px;
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: #FE5F5F;
            opacity: 1;
            float: left;
            margin-top: 12px;
            margin-left: 2px;
        }

        .right {
            position: absolute;
            left: 307px;
        }
    </style>

    <script type="text/javascript">
        function display(x) {
            x.style.background = "linear-gradient(90deg,rgba(71,137,255,0.47) 0%,rgba(71,137,255,0.1) 56%,rgba(36,69,128,0) 100%)";
            var name = x.className;
            name = "../../static/image/index/" + name + "(1).png";
            // alert(name);
            x.firstElementChild.src = name;
        }

        function normal(x) {
            x.style.background = "#FFFFFF";
            var name = x.className;
            name = "../../static/image/index/" + name + ".png";
            // alert(name);
            x.firstElementChild.src = name;
        }
    </script>

</head>

<body style="background:rgba(244,247,251,1);">


<!-- 导航条 -->
<div id="nav">
    <div id="logo">logo</div>
    <ul>
        <li class="managedata">
            <img src="../../static/image/index/managedata.png"/>
            <a href="/index">运营数据</a>
        </li>
        <li class="usermanage" onmousemove="display(this)" onmouseout="normal(this)">
            <img class="img" src="../../static/image/index/usermanage.png"/>
            <a href="/udo/query">用户管理</a>
        </li>
        <li class="hotelmanage" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/hotelmanage.png"/>
            <a href="#">酒店事务</a>
        </li>
        <li class="hotelmoney" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/hotelmoney.png"/>
            <a href="#">酒店财务</a>
        </li>
        <li class="basesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/basesettings.png"/>
            <a href="#">基础配置</a>
        </li>
        <li class="backstagesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/backstagesettings.png"/>
            <a href="#">后台设置</a>
        </li>
    </ul>
    <a href="/login">登陆</a>
    <a href="/logout">登出</a>
</div>


<div class="right">
    <!-- 用户 -->
    <div id="user">
        <img src="../../static/image/index/帮助.png"/>
        <img src="../../static/image/index/通知.png" style="margin-left:36px;"/>
        <img src="../../static/image/index/图像 2.png"
             style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;justify-content:center;overflow:hidden;align-items: center;"/>
        <img src="../../static/image/index/路径 1146@2x.png" style="width:7px"/>
    </div>

    <!-- 数据概要 -->
    <div id="totle">
        <!-- 今日收益 -->
        <div class="blue">
            <div class="name">今日收益</div>
            <div class="digit">123456</div>
        </div>
        <!-- 今日收益 -->
        <div class="white">
            <div class="name">今日支出</div>
            <div class="digit">45673</div>
        </div>
        <!-- 今日收益 -->
        <div class="white">
            <div class="name">今日客流量</div>
            <div class="digit">2345</div>
        </div>
        <!-- 今日收益 -->
        <div class="white">
            <div class="name">今日订单</div>
            <div class="digit">3411</div>
        </div>
    </div>


    <!-- 客房情况 -->
    <div id="room">
        <script>
            var myChart = echarts.init(document.getElementById('room'));

            let kv = {{ rooms_number | safe }};//取出后台传递的数据，此处添加safe过滤避免警告
            let test = [];//声明一个新的字典用于存放数据
            for (let logKey in kv) {//将对应键值对取出存入test，logKey 为该字典的键
                if (!kv.hasOwnProperty(logKey)) continue;
                test.push({value: kv[logKey], name: logKey});
            }

            var option = {
                    dataset: {
                        source: test,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.name + ": " + params.value.value + "间 " + "(" + params.percent + "%)"
                        }
                    },
                    title: {
                        text: '住房情况',
                        left: 47,
                        top: 49,
                        textStyle: {
                            fontSize: 24,
                            fontWeight:
                                'bold',
                            color: '#4F4F4F',
                        }
                    }
                    ,
                    legend: {
                        orient: 'horizontal',
                        x: 'center',
                        bottom: 15,
                        data: ['已入住', '预定', '空闲', '维修'],
                        icon: "circle",
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: 16,
                                    color: "#EA5504",
                                    padding: 10
                                },
                                b: {
                                    fontSize: 16,
                                    color: "#333"
                                }
                            }
                        }
                    }
                    ,
                    series: [{
                        type: 'pie',
                        radius: ['38%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        color: ['#D4EAFF', '#A2D0FC', '#78B5FF', '#5A9DFF']
                    }]
                }
            ;
            myChart.setOption(option);
        </script>
    </div>


    <!-- 入住情况 -->
    <div id="live">
        <img src="../../static/image/index/路径 1146@2x.png"
             style="width:7px;float:right;margin-right:38px;margin-top:32px;"/>
        <div id="chart" style="width:658px;height:337px;float:left;margin-left:55px;margin-top:42px">
            <script>
                var myChart = echarts.init(document.getElementById('chart'));
                var option = {
                    title: {
                        text: '入住情况',
                        textStyle: {
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: '#000000',
                            fontFamily: 'Microsoft YaHei',
                        },
                    },
                    legend: {
                        data: ['预订数量', '实际入住'],
                        icon: "circle",
                        textStyle: {
                            color: '#4D6282',
                            fontSize: 16,

                        }
                    },
                    grid: {
                        left: 51,
                        top: 90,
                        bottom: 30,
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                        axisLine: {
                            lineStyle: {
                                color: '#EFF0F5',
                            },
                        },
                        axisLabel: {
                            color: '#9EADC5',
                        },
                    },
                    yAxis: {
                        name: '(间)',
                        nameTextStyle: {
                            color: '#4D6282',
                            fontSize: 14,
                            fontFamily: 'Microsoft YaHei',
                            align: 'right',
                        },
                        nameGap: 22,
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#9EADC5',
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#EFF0F5',
                            },
                        },
                    },
                    series: [{
                        name: '预订数量',
                        type: 'bar',
                        data: [600, 550, 390, 650, 410, 390, 400],
                        color: '#4789FF',
                        barWidth: 10,
                    },
                        {
                            name: '实际入住',
                            type: 'bar',
                            data: [450, 410, 580, 380, 390, 570, 450],
                            color: '#1ECBC1',
                            barWidth: 10,
                        }
                    ]
                }
                myChart.setOption(option)
            </script>
        </div>

        <div id="pretotle" style="margin-top:53px">
            <div class="number">¥88888</div>
            <img src="../../static/image/index/路径 1144@2x.png"
                 style="width:7px;float:left;margin-left:108px;margin-top:36px;margin-right:5px;margin-bottom:5px"/>
            <div class="name">预订数量</div>
            <img src="../../static/image/index/增长箭头.png"
                 style="width:13px;margin-left:9px;margin-top:12px;float:left"/>
            <div class="pretotledigit">5.7%</div>


        </div>
        <div id="real">
            <div class="number">¥88888</div>
            <img src="../../static/image/index/路径 1145@2x.png"
                 style="width:7px;float:left;margin-left:108px;margin-top:36px;margin-right:5px;margin-bottom:5px"/>
            <div class="name">实际入住</div>
            <img src="../../static/image/index/增长箭头(1).png"
                 style="width:13px;margin-left:9px;margin-top:12px;float:left"/>
            <div class="realtotledigit">5.7%</div>


        </div>
    </div>


    <!-- money -->
    <div id="money">
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('money'));
            var option = {
                title: {
                    text: '月收益情况',
                    left: 45,
                    top: 31,
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        color: '#2D3444',
                        fontFamily: 'Microsoft YaHei',
                    }
                },
                legend: {
                    data: ['巴啦啦能量1', '巴啦啦能量2'],
                    icon: "circle",
                    top: 47,
                    textStyle: {
                        color: '#4D6282',
                        fontSize: 17,
                    }
                },
                grid: {
                    left: 137,
                    top: 106,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
                    axisLine: {
                        lineStyle: {
                            color: '#EFF0F5',
                        },
                    },
                    axisLabel: {
                        color: '#9EADC5',
                    },
                },
                yAxis: {
                    name: '(元)',
                    nameTextStyle: {
                        color: '#4D6282',
                        fontSize: 14,
                        fontFamily: 'Microsoft YaHei',
                        align: 'right',
                    },
                    type: 'value',
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#9EADC5',
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#EFF0F5',
                        },
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#DAE3E6',
                        }
                    }
                },
                series: [{
                    name: '巴啦啦能量1',
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 1445, 1531, 1612, 1442, 1334, 1234, 1231, 1812, 1451, 1242, 1234, 1241, 1431, 1143, 1210, 1120, 1300, 1312, 1230, 1190, 1309, 1509, 1490, 1450],
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(71,137,255,0.6)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(71,137,255,0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    lineStyle: {
                        color: '#4789FF',
                    },
                    itemStyle: {
                        color: '#4789FF',
                    },
                    showSymbol: false,
                    smooth: true,
                },
                    {
                        name: '巴啦啦能量2',
                        data: [1414, 1522, 1601, 1934, 1501, 1630, 1920, 1845, 1631, 1812, 1642, 1534, 1834, 1831, 1812, 1751, 1642, 1534, 1541, 1531, 1443, 1451, 1542, 1434, 1341, 1331, 1343, 1290, 1250, 1240],
                        type: 'line',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(67,179,180,0.6)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(67,179,180,0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        lineStyle: {
                            color: '#43B3B4',
                        },
                        itemStyle: {
                            color: '#43B3B4',
                        },
                        showSymbol: false,
                        smooth: true,
                    },
                ]
            };
            myChart.setOption(option);
        </script>

    </div>
<footer style="margin-left:450px;margin-top:30px;float:left;width:600px;text-align: center">
<a href="http://www.beian.miit.gov.cn/" style="text-decoration:none;color:#939393;float:left">浙ICP备20006523号 | </a>

<div style="width:250px;margin:0;float:left">

    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011802001941" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
	<img src="../../static/image/备案图标.png" style="float:left;"/>
	    <div style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">浙公网安备 33011802001941号
	        </div>
    </a>
</div>

</footer>
</div>



</body>

</html>
